<template>
  <div class="success-detail-wrap">
    <div class="my-router-box">
      <p @click="$router.push('/success')">{{ $t('成功案例') }}</p>
      <img src="../../assets/img/prev-tab@2x.png" alt="" />
      <p>{{ $t('案例详情') }}</p>
    </div>
    <div class="success-detail-content">
      <p class="success-title">{{ successObj.title }}</p>
      <div class="success-content" v-html="successObj.context"></div>
      <div class="success-bottom">
        <p>{{ formatDate(successObj.createTime, 'YYYY-MM-DD HH-mm-ss') }}</p>
        <div class="sharethis-inline-share-buttons my-share-box"></div>
      </div>
    </div>
    <div class="misson-top">
      <div class="mission-recommend" style="margin-bottom: 0.89rem">
        <div class="title">
          <img src="../../assets/img/title.png" alt="" />
          <p>{{ $t('热门案例') }}</p>
        </div>
        <div class="none-box" v-if="successList1.length == 0">
          {{ $t('暂无数据') }}
        </div>
        <div class="mission-list-item" v-for="(item, index) in successList1" :key="index" @click="goToDetail(item)">
          <div class="number">
            <img src="../../assets/img/no1.png" alt="" v-if="index == 0" />
            <img src="../../assets/img/no2.png" alt="" v-else-if="index == 1" />
            <img src="../../assets/img/no3.png" alt="" v-else-if="index == 2" />
            <p v-else>{{ index + 1 }}</p>
          </div>
          <p class="summary">{{ item.title }}</p>
        </div>
      </div>
      <div class="mission-recommend">
        <div class="title">
          <img src="../../assets/img/title.png" alt="" />
          <p>{{ $t('猜你喜欢') }}</p>
        </div>
        <div class="none-box" v-if="successList2.length == 0">
          {{ $t('暂无数据') }}
        </div>
        <div class="mission-list-item" v-for="(item, index) in successList2" :key="index" @click="goToDetail(item)">
          <div class="number">
            <img src="../../assets/img/no1.png" alt="" v-if="index == 0" />
            <img src="../../assets/img/no2.png" alt="" v-else-if="index == 1" />
            <img src="../../assets/img/no3.png" alt="" v-else-if="index == 2" />
            <p v-else>{{ index + 1 }}</p>
          </div>
          <p class="summary">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api/success.js'
import { formatDate } from '@/utils/index.js'
export default {
  data() {
    return {
      successList1: [],
      successList2: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      id: null,
      caseId: null,
      lang: null,
      successObj: {},
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.caseId = this.$route.query.caseId
    this.lang = this.$i18n.locale
    this.initData1()
    this.initData2()
    this.getDetail()
    setTimeout(() => {
      if (window.__sharethis__) {
        window.__sharethis__.initialize()
      }
    }, 100)
  },
  methods: {
    async getDetail() {
      let res = await this.$http.get(api.getDetailByCaseId, {
        params: {
          id: this.id,
          caseId: this.caseId,
          lang: this.lang,
        },
      })
      if (res && res.code == 0) {
        this.successObj = res.data
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    // 在 methods 中添加
    goToDetail(item) {
      // 确保 item 包含 id 和 caseId 字段（根据实际接口返回调整）
      this.$router.push({
        path: '/successDetail', // 目标详情页路由
        query: {
          caseId: item.caseId   // 传递详情页需要的 caseId 参数
        }
      });
      this.id = item.id;
      this.caseId = item.caseId
      this.getDetail()
    },
    formatDate(time, format) {
      return formatDate(time, format)
    },
    //热门案例
    async initData1() {
      let res = await this.$http.get(api.getList, {
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          orderBy: 'visits',
          status: 0
        },
      })
      if (res && res.code == 0) {
        this.successList1 = res.data.list
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    // 猜你喜欢
    async initData2() {
      let res = await this.$http.get(api.getList, {
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          orderBy: 'shares',
          status: 0
        },
      })
      if (res && res.code == 0) {
        this.successList2 = res.data.list
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.success-detail-wrap {
  margin-left: 7.78rem;
  margin-top: 3.72rem;
  margin-bottom: 5.56rem;
  display: flex;
  align-items: flex-start;

  .success-detail-content {
    background: #f5f7fa;
    width: 42.47rem;
    border-radius: 0.44rem;
    padding: 1.33rem;
    margin-right: 0.89rem;

    .success-title {
      font-weight: bold;
      font-size: 1.33rem;
      color: #333333;
      text-align: center;
      margin-bottom: 1.33rem;
    }

    .success-content {
      font-size: 0.89rem;
      color: #666666;
      line-height: 1.56rem;
      text-align: justify;
      margin-bottom: 2.83rem;

      ::v-deep img {
        max-width: 100% !important;
      }
    }

    .success-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        font-size: 0.89rem;
        color: rgba(102, 102, 102, 0.98);
      }
    }
  }

  .misson-top {
    .mission-recommend {
      background: #f5f7fa;
      border-radius: 0.44rem;
      width: 21rem;
      padding: 0.89rem 1.17rem 0.89rem 0.89rem;

      .title {
        font-weight: bold;
        font-size: 1.33rem;
        color: #333333;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.94rem;

        img {
          width: 1.6rem;
          height: 1.12rem;
          margin-right: 0.44rem;
        }
      }

      .mission-list-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.89rem;

        &:hover {
          opacity: 0.8;
          /* 悬停时透明度变化（或其他视觉反馈） */
          transform: translateX(5px);
          /* 可选：轻微右移增强交互感 */
        }

        .number {
          background: rgba(210, 229, 246, 0.4);
          width: 1.78rem;
          height: 1.78rem;
          border-radius: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
          }

          p {
            font-size: 0.78rem;
            color: #425f9b;
            font-weight: bold;
          }
        }

        .summary {
          flex: 1;
          font-size: 0.89rem;
          color: #333333;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin: 0 1.33rem 0 0.56rem;
          cursor: pointer;
        }

        .price {
          font-size: 0.89rem;
          color: #f85c02;
        }
      }
    }
  }
}
</style>
